'use client'

import { useState } from 'react'
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button,
  FormControl,
  FormLabel,
  Input,
  Textarea,
  Select,
  FormErrorMessage,
  VStack,
  useColorModeValue,
  ScaleFade,
  SlideFade
} from '@chakra-ui/react'

export type ProjectType = 'novel' | 'short_story' | 'screenplay' | 'other'

interface NewProjectModalProps {
  isOpen: boolean;
  onClose: () => void;
  onCreateProject: (title: string, description: string, type: ProjectType) => void;
}

export const NewProjectModal = ({ 
  isOpen, 
  onClose, 
  onCreateProject 
}: NewProjectModalProps) => {
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [type, setType] = useState<ProjectType>('novel')
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [errors, setErrors] = useState<{title?: string; description?: string}>({})
  
  const handleSubmit = () => {
    // 验证表单
    const newErrors: {title?: string; description?: string} = {}
    if (!title.trim()) {
      newErrors.title = '标题不能为空'
    }
    
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors)
      return
    }
    
    setIsSubmitting(true)
    
    // 创建新项目
    onCreateProject(title, description, type)
    
    // 重置表单并关闭
    setTitle('')
    setDescription('')
    setType('novel')
    setErrors({})
    setIsSubmitting(false)
    onClose()
  }
  
  return (
    <Modal 
      isOpen={isOpen} 
      onClose={onClose} 
      size="md"
      motionPreset="slideInBottom"
    >
      <ModalOverlay 
        bg="blackAlpha.300" 
        backdropFilter="blur(10px)"
      />
      <ScaleFade in={isOpen} initialScale={0.9}>
        <ModalContent 
          shadow="xl"
          borderRadius="md"
          bg={useColorModeValue('white', 'gray.800')}
        >
          <ModalHeader
            borderTopRadius="md"
            bg={useColorModeValue('red.50', 'red.900')}
            color={useColorModeValue('red.600', 'red.200')}
          >
            创建新项目
          </ModalHeader>
          <ModalCloseButton />
          
          <ModalBody>
            <SlideFade in={isOpen} offsetY="20px">
              <VStack spacing={4}>
                <FormControl isRequired isInvalid={!!errors.title}>
                  <FormLabel>项目标题</FormLabel>
                  <Input 
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    placeholder="请输入项目标题"
                    autoFocus
                  />
                  {errors.title && (
                    <FormErrorMessage>{errors.title}</FormErrorMessage>
                  )}
                </FormControl>
                
                <FormControl>
                  <FormLabel>描述</FormLabel>
                  <Textarea 
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    placeholder="请输入项目描述"
                    rows={3}
                  />
                </FormControl>
                
                <FormControl>
                  <FormLabel>项目类型</FormLabel>
                  <Select 
                    value={type} 
                    onChange={(e) => setType(e.target.value as ProjectType)}
                  >
                    <option value="novel">长篇小说</option>
                    <option value="short_story">短篇故事</option>
                    <option value="screenplay">剧本</option>
                    <option value="other">其他</option>
                  </Select>
                </FormControl>
              </VStack>
            </SlideFade>
          </ModalBody>
          
          <ModalFooter
            borderTop="1px"
            borderColor={useColorModeValue('gray.100', 'gray.700')}
          >
            <Button variant="outline" mr={3} onClick={onClose}>
              取消
            </Button>
            <Button 
              colorScheme="red" 
              onClick={handleSubmit}
              isLoading={isSubmitting}
            >
              创建项目
            </Button>
          </ModalFooter>
        </ModalContent>
      </ScaleFade>
    </Modal>
  )
}